<template>
  <view class="demo-category">
    <fu-category 
      :categories="categories"
      @item-click="onItemClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: '手机数码',
          subtitle: '手机平板电脑',
          items: [
            {
              id: 11,
              name: 'iPhone 15 Pro',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 12,
              name: 'iPad Pro',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 13,
              name: 'MacBook Pro',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 14,
              name: 'AirPods Pro',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 15,
              name: 'Apple Watch',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 16,
              name: 'AirTag',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }
          ]
        },
        {
          id: 2,
          name: '服装鞋包',
          subtitle: '男女服饰箱包',
          items: [
            {
              id: 21,
              name: '连衣裙',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 22,
              name: '运动鞋',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 23,
              name: '牛仔裤',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 24,
              name: '双肩包',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            }
          ]
        },
        {
          id: 3,
          name: '美妆护肤',
          subtitle: '美妆个护清洁',
          items: [
            {
              id: 31,
              name: '面膜',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 32,
              name: '口红',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 33,
              name: '护肤套装',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 34,
              name: '洗面奶',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 35,
              name: '精华液',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            }
          ]
        },
        {
          id: 4,
          name: '食品生鲜',
          subtitle: '零食生鲜水果',
          items: [
            {
              id: 41,
              name: '坚果礼盒',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 42,
              name: '进口水果',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 43,
              name: '休闲零食',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 44,
              name: '牛奶乳品',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            }
          ]
        },
        {
          id: 5,
          name: '家居家装',
          subtitle: '家具建材灯具',
          items: [
            {
              id: 51,
              name: '布艺沙发',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 52,
              name: '乳胶床垫',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 53,
              name: '北欧装饰画',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 54,
              name: '实木餐桌',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 55,
              name: 'LED吸顶灯',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            }
          ]
        },
        {
          id: 6,
          name: '运动户外',
          subtitle: '运动装备户外装备',
          items: [
            {
              id: 61,
              name: '跑步机',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 62,
              name: '瑜伽垫',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 63,
              name: '健身器材',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            }
          ]
        },
        {
          id: 7,
          name: '图书文娱',
          subtitle: '图书音像文具',
          items: [
            {
              id: 71,
              name: '畅销小说',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 72,
              name: '考试教辅',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 73,
              name: '儿童绘本',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 74,
              name: '办公文具',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }
          ]
        },
        {
          id: 8,
          name: '母婴玩具',
          subtitle: '母婴用品玩具',
          items: [
            {
              id: 81,
              name: '纸尿裤',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 82,
              name: '婴儿奶粉',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 83,
              name: '益智玩具',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 84,
              name: '婴儿推车',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            }
          ]
        },
        {
          id: 9,
          name: '家用电器',
          subtitle: '大小家电电器',
          items: [
            {
              id: 91,
              name: '智能电视',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 92,
              name: '洗衣机',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 93,
              name: '空调',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 94,
              name: '冰箱',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }
          ]
        },
        {
          id: 10,
          name: '珠宝配饰',
          subtitle: '珠宝首饰配饰',
          items: [
            {
              id: 101,
              name: '钻石项链',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 102,
              name: '黄金手镯',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 103,
              name: '时尚手表',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            }
          ]
        },
        {
          id: 11,
          name: '宠物生活',
          subtitle: '宠物食品用品',
          items: [
            {
              id: 111,
              name: '猫粮',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 112,
              name: '狗粮',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 113,
              name: '猫砂',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 114,
              name: '宠物玩具',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            }
          ]
        },
        {
          id: 12,
          name: '汽车用品',
          subtitle: '汽车装饰养护',
          items: [
            {
              id: 121,
              name: '行车记录仪',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 122,
              name: '汽车香水',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 123,
              name: '车载充电器',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            }
          ]
        },
        {
          id: 13,
          name: '医药保健',
          subtitle: '医药保健器械',
          items: [
            {
              id: 131,
              name: '感冒药',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 132,
              name: '维生素',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            },
            {
              id: 133,
              name: '血压计',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 134,
              name: '口罩',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            }
          ]
        },
        {
          id: 14,
          name: '厨房用品',
          subtitle: '厨具餐具用品',
          items: [
            {
              id: 141,
              name: '炒锅',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 142,
              name: '餐具套装',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            },
            {
              id: 143,
              name: '刀具套装',
              image: 'https://cdn.uviewui.com/uview/goods/3.jpg'
            }
          ]
        },
        {
          id: 15,
          name: '办公设备',
          subtitle: '办公设备耗材',
          items: [
            {
              id: 151,
              name: '打印机',
              image: 'https://cdn.uviewui.com/uview/goods/4.jpg'
            },
            {
              id: 152,
              name: '投影仪',
              image: 'https://cdn.uviewui.com/uview/goods/5.jpg'
            },
            {
              id: 153,
              name: '办公椅',
              image: 'https://cdn.uviewui.com/uview/goods/1.jpg'
            },
            {
              id: 154,
              name: '复印纸',
              image: 'https://cdn.uviewui.com/uview/goods/2.jpg'
            }
          ]
        }
      ]
    }
  },
  
  methods: {
    onItemClick(item) {
      console.log('点击商品:', item)
      uni.showToast({
        title: `点击了 ${item.name}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.demo-category {
  height: 100vh;
}
</style> 